<style include="cr-shared-style">
  :host([is-default-low-battery_]) #defaultBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    color: var(--cros-text-color-alert);
  }

  :host(:not([is-default-low-battery_])) #defaultBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    color: var(--cros-icon-color-secondary);
  }

  :host([is-left-bud-low-battery_]) #leftBudBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    color: var(--cros-text-color-alert);
  }

  :host(:not([is-left-bud-low-battery_])) #leftBudBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    color: var(--cros-icon-color-secondary);
  }

  :host([is-case-low-battery_]) #caseBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    color: var(--cros-text-color-alert);
  }

  :host(:not([is-case-low-battery_])) #caseBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    color: var(--cros-icon-color-secondary);
  }

  :host([is-right-bud-low-battery_]) #rightBudBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    color: var(--cros-text-color-alert);
  }

  :host(:not([is-right-bud-low-battery_])) #rightBudBatteryContainer {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    color: var(--cros-icon-color-secondary);
  }

  .battery-icon {
    --iron-icon-height: 16px;
    --iron-icon-width: 16px;
    margin-inline-end: -2px;
    padding-bottom: 2px;
  }

  .multiple-battery {
    padding-end: 6px;
  }
</style>
<template is="dom-if" if="[[!showMultipleBatteries_]]" restamp>
  <div id="defaultBatteryContainer">
    <iron-icon id="defaultBatteryIcon" class="battery-icon"
        icon="[[getBatteryIcon_(device, BatteryType.DEFAULT)]]">
    </iron-icon>
    <span id="defaultBatteryPercentage">
      [[getBatteryPercentageString_(device, BatteryType.DEFAULT)]]
    </span>
  </div>
</template>

<template is="dom-if" if="[[showMultipleBatteries_]]" restamp>
  <div>
    <template is="dom-if"
        if="[[shouldShowBattery_(device, BatteryType.LEFT_BUD)]]" restamp>
      <span id="leftBudBatteryContainer" class=".multiple-battery">
        <iron-icon id="leftBudBatteryIcon" class="battery-icon"
            icon="[[getBatteryIcon_(device, BatteryType.LEFT_BUD)]]">
        </iron-icon>
        <span id="leftBudBatteryPercentage">
          [[getBatteryPercentageString_(device, BatteryType.LEFT_BUD)]]
        </span>
      </span>
    </template>

    <template is="dom-if"
        if="[[shouldShowBattery_(device, BatteryType.CASE)]]" restamp>
      <span id="caseBatteryContainer" class=".multiple-battery">
        <iron-icon id="caseBatteryIcon" class="battery-icon"
            icon="[[getBatteryIcon_(device, BatteryType.CASE)]]">
        </iron-icon>
        <span id="caseBatteryPercentage">
          [[getBatteryPercentageString_(device, BatteryType.CASE)]]
        </span>
      </span>
    </template>

    <template is="dom-if"
        if="[[shouldShowBattery_(device, BatteryType.RIGHT_BUD)]]" restamp>
      <span id="rightBudBatteryContainer" class=".multiple-battery">
        <iron-icon id="rightBudBatteryIcon" class="battery-icon"
            icon="[[getBatteryIcon_(device, BatteryType.RIGHT_BUD)]]">
        </iron-icon>
        <span id="rightBudBatteryPercentage">
          [[getBatteryPercentageString_(device, BatteryType.RIGHT_BUD)]]
        </span>
      </span>
    </template>
  </div>
</template>
